<template>
  <el-container>
    <el-header>
      <el-button type="primary">{{ this.bookname }}</el-button>
    </el-header>
    <div class="TopB">
      <el-aside width="410px">
        <ul>
          <li
            v-for="(item,index) in titles"
            :key="index"
            class="title"
            @click="thisTitle(index)"
          >
            <el-tag  id="isTitle" >{{
              item.title
            }}</el-tag>
            <!-- <el-button @click="thisTitle(item._id)">{{ item.title }}</el-button> -->
          </li>
        </ul>
      </el-aside>
      <el-main id="text">
        <!-- <el-card> -->
        <textarea name="" id="ta" readonly="readonly" v-model="textarea"></textarea>
        <!-- </el-card> -->
      </el-main>
      <div class="TopBc">
          <li class="el-icon-setting" @click="isSet">设置</li>
          <li class="el-icon-caret-top" @click="upTitle">上一章</li>
          <li class="el-icon-caret-bottom" @click="downTitle">下一章</li>
      </div>
    </div> 
  </el-container>
</template>

<script>
export default {
  created() {
    this.getThisBook();
    this.isLogin();
  },
  data() {
    return {
      textarea: "",
      thisBook: {},
      titles: [],
      thisTitleId: "",
      bookname:"",
      titleid:'',
    };
  },
  methods: {
    //检测用户是否登陆
    async isLogin(){
      //console.log(window.name);
      if(window.sessionStorage.getItem("userId") != null && window.name == ""){
        console.log(window.name);
          const {data:res} = await this.$http.post(`/users/newHistory/${window.sessionStorage.getItem("userId")}`,{
            bookid:this.$route.params.id
          })
          //console.log(res);
          if(res == "OK"){
            window.name = "se"
          }
          //console.log(window.name);
      } else {
        console.log(window.name);
      }
    },
    async getThisBook() {
      this.id = this.$route.params.id;
      const { data: res } = await this.$http.get(
        `books/userReadBook/${this.$route.params.id}`
      );
      this.titles = res.data;
      //console.log(this.titles);
      this.bookname = res.data.bookname;
      this.thisTitle(this.$route.params.title);
    },
    async thisTitle(index) {
      //console.log(index);
      let id = this.titles[index]._id
      this.index = index;
      const { data: res } = await this.$http.get(`books/getcontent/${id}`);
      //console.log(res);
      this.textarea = res.data.content;
      this.thisTitleId = res.data._id;
      document.getElementById("ta").scrollTo(0,0)
    },
    upTitle(){
        if(this.index == 0){
            this.$message.error("已经是第一章了");
            return 
        }
        document.getElementById("ta").scrollTo(0,0)
        this.thisTitle(this.index - 1)
        //console.log(this.titles[this.index]._id);
    },
    downTitle(){
      //console.log(this.index);
        if(this.index == this.titles.length - 1){
            this.$message.error("已经是最后一章了");
            return 
        }
        document.getElementById("ta").scrollTo(0,0)
        this.thisTitle(Number(this.index + 1))
        //console.log(this.index);
    },
    isSet(){
        
    }
  },
};

// window.onfocus = function(){
//   this.methods.this.isLogin()
// }
// window.onblur = function(){
//   console.log(2);
// }
</script>

<style lang="less" scoped>
.el-container{
    height: 100%;
    min-width: 1600px;
    background-color: rgb(233,227,214);
}
.el-header {
  display: flex;
  justify-content: space-between;
  background-color: black;
}
.TopB{
    width: 100%;
    height: 100%;
    display: flex;
}
ul {
  display: flex;
  padding: 0;
  flex-direction: row;
  flex-wrap: wrap;
}
li {
  width: 45%;
  list-style: none;
  margin-right: 5px;
}
.el-main{
 width: 800px;
  display: flex;
  justify-content: center;
  background-color: rgb(246,241,231);
}
.el-main textarea{
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    background-color:  rgb(246,241,231);
}
.title {
  // border-bottom: 1px solid black;
  text-align: center;
  margin-top: 3px;
}
.el-tag {
  width: 100%;
  height: 100%;
  font-size: 16px;
  overflow: hidden;
}
  .el-tag:hover{
    color: red;
    cursor:pointer
  }
  .TopBc{
    display: flex;
    width: 400px;
    padding: 10px;
    flex-direction: column;
  }
  .TopBc li{
      height: 58px;
      width: 58px;
      margin: 1px;
      border-style: solid;
      border-width: 1px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      background-color:  rgb(246,241,231);;
  }
  .TopBc li:hover{
      color: red;
  }
</style>
